<template>
    <div>
      <!--<van-cell :value="displayData" :required="required" :title="title" is-link @click="showPopup = true" />-->
      <div class="time-range-container" :class="{'is-require': required}">
        <span class="title">{{title}}</span>
        <span v-if="this.value[0]" class="time-input" @click="showPopupStart = true">{{this.value[0]}}</span>
        <span v-else class="time-input-placeholder" @click="showPopupStart = true">请选择</span>
        <span>至</span>
        <span v-if="this.value[1]" class="time-input" @click="showPopupEnd = true">{{this.value[1]}}</span>
        <span v-else class="time-input-placeholder" @click="showPopupEnd = true">请选择</span>

      </div>
      <van-popup v-model="showPopupStart" position="bottom" :overlay="overlay">
        <van-datetime-picker
          v-model="startDate"
          :type="type"
          @confirm="onConfirmStart"
          @cancel="onCancel"
          :formatter="formatter"
          :min-date="new Date(1970, 1, 1)"
        />

      </van-popup>
      <van-popup v-model="showPopupEnd" position="bottom" :overlay="overlay">
        <van-datetime-picker
          v-model="endDate"
          :type="type"
          @confirm="onConfirmEnd"
          @cancel="onCancel"
          :formatter="formatter"
          :max-date="new Date()"
        />
      </van-popup>
    </div>
</template>
<script>
import Vue from 'vue'
import { Popup, DatetimePicker } from 'vant';
import dayjs from 'dayjs';

// todo 根据值限制最大最小值存在bug，暂不处理，弹框提示开始时间不能大于结束时间
export default {
  name: 'zx-timerange-picker',
  components:{
    vanPopup: Popup,
    vanDatetimePicker: DatetimePicker
  },
  props: {
    value: {
      type: [String, Number, Array]
    },
    overlay: {
      type: Boolean,
      default() {
        return true;
      }
    },
    type: {
      type: String,
      default() {
        return 'date';
      }
    },
    required: {
      type: Boolean,
      default() {
        return false;
      }
    },
    title: {
      type: String
    },
    timeFormat: {
      type: String,
      default() {
        return 'YYYY-MM-DD';
      }
    }
  },
  data() {
    return {
      showPopupStart: false,
      showPopupEnd: false,
      startDate: new Date(),
      endDate: new Date(),
      timeRange: []
    };
  },
  watch: {

  },
  mounted() {},
  computed: {},
  mounted() {
    this.timeRange = this.value;
    this.startDate = this.value[0] ? dayjs(this.value[0]).toDate() : new Date();
    this.endDate = this.value[1] ? dayjs(this.value[1]).toDate() : new Date();
  },
  methods: {
    onConfirmStart(value) {
        // 设置结束时间最小值
      this.minDate = value;
      this.showPopupStart = false;
      const time = dayjs(value).format(this.timeFormat);
      this.$set(this.timeRange, 0, time)
      this.$emit('input', this.timeRange);
    },
    onConfirmEnd(value) {
      // 设置开始时间最大值
      this.maxDate = value;
      this.showPopupEnd = false;
      const time = dayjs(value).format(this.timeFormat);
      this.$set(this.timeRange, 1, time)
      this.$emit('input', this.timeRange);
    },
    onCancel() {
      this.showPopupStart = false;
      this.showPopupEnd = false;
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    }
  }
}
</script>
<style scoped lang="less" type="text/less">
  @import url('../../static/style/var');
  .time-range-container {
    display: flex;
    padding: 10px 15px;
    .time-input {
      flex: 1;
      text-align: center;
    }
    .time-input-placeholder {
      flex: 1;
      text-align: center;
      color: @weak-tips-color;
    }
  }
</style>
